<template>
    <div class="main_wrap">
      <div class="deivceTop">
        <organization
          class="changeDep"
          :selectDepartment="selectDepartment"
          @department_select="handleDepartment">
        </organization>
        <div class="changeMore">
          <div class="scan"><span class="iconfont icon-shaixuan" @click="changeMore"></span></div>
          <div class="scan">
            <span @click="scanAdd" v-if="$store.state.user && $store.state.user.admin != 5" style="font-size:20px;" class="iconfont">&#xe60a;</span>
          </div>
          <div @click="changeYwglHome" class="changeHome">
           <a href="javascript:;" class="picBox">
              <!-- <img src="../../styles/yunwei.svg" alt="" class="img"> -->
               <iconSvg name="yunwei" w="25" class="iconImg"></iconSvg>
            </a>
          </div>
        </div>
        <div  v-focusable @click="backToHomepage" class="backTo">
         <span style="font-size:17px;color:#fff;margin-left:9px;" class="iconfont">&#xe668;</span>
        </div>
      </div>
      <div class="MoreDataP" v-if="showMore">
        <div class="deviceName">名&emsp;称：<input type="text" placeholder="请输入名称" v-model="deviceNameSpot"></div>
        <div class="deviceCode">编&emsp;号：<input type="text" placeholder="请输入编号" v-model="deviceCodeSpot"></div>
        <div class="operationPerson">操作人：<input type="text" placeholder="请输入姓名" v-model="operationPerson"></div>
        <div v-if="tabIndex == 0 || tabIndex == 2" class="deviceCodeZt">状 态：
          <select class="iu-select" v-model="statusNum">
            <option label="全部" value=""> </option>
            <option v-for="item in scheduleStatusList" :key="item.val" :label="item.val" :value="item.xl?item.xl:0"></option>
          </select>
        </div>
        <div class="BtnGroup">
          <icon name="ywgl" w="20px" h="20px" ></icon>
          <div class="btn-reset" @click="reset">重置</div>
          <div class="btn-over"  @click="overBtn">完成</div>
        </div>
        <!-- <div class="mask" v-show="show3" @click="showVuePopup3(false)"></div> -->
      </div>
      <div class="contentWrap" style="z-index:110px;">
        <tab :line-width="3" line-color="#456de6" active-color='#fff' v-model="tabIndex" default-color="#fff">
            <tab-item
                class="vux-center"
                :selected="demo2 === item"
                v-for="(item, index) in tltles"
                @on-item-click="tabSelect(index)"
                :key="index"
                >{{item}}
            </tab-item>
        </tab>
        <div class='dataNum'>共{{number}}条记录</div>
        <swiper class="swiper-class" :v-model="tabIndex" :show-dots="false"  style="height: 45px;">
            <swiper-item>
                <x-table  v-if="tabIndex==0" class="headTab1" :cell-bordered="false"><!-- :class="'headTab'+[tabIndex+1]" -->
                    <thead>
                    <tr>
                      <td style="text-align: left;">名称</td>
                      <td>剩余时间
                        <font-awesome-icon :icon="['fa','sort']" size="lg" />
                      </td>
                      <td>类型</td>
                      <td>状态
                      </td>
                      <td style="text-align: right;padding-right:9px;">操作</td>
                    </tr>
                    </thead>
                </x-table>
                 <x-table v-if="tabIndex==1" class="headTab2" :cell-bordered="false">
                    <thead>
                    <tr>
                       <td style="text-align: left;">名称</td>
                      <td>类型</td>
                      <td>执行时间
                        <font-awesome-icon :icon="['fa','sort']" size="lg" />
                        <!-- <iconSvg name="downSort" w="14px" h="14px" ></iconSvg> -->
                      </td>
                      <td style="text-align: right;box-sizing:border-box;">操作</td>
                    </tr>
                    </thead>
                </x-table>
                 <x-table v-if="tabIndex==2" class="headTab3" :cell-bordered="false">
                    <thead>
                    <tr>
                       <td style="text-align: left;">名称</td>
                      <td @click="sort('date', sort1, 1)">执行时间
                        <font-awesome-icon :icon="['fa','sort']" size="lg" />
                        <!-- <iconSvg name="downSort" w="14px" h="14px" ></iconSvg> -->
                      </td>
                      <td>类型</td>
                      <td>状态</td>
                      <td style="text-align: right;">执行人</td>
                    </tr>
                    </thead>
                </x-table>
                 <x-table v-if="tabIndex==3" class="headTab4" :cell-bordered="false">
                    <thead>
                    <tr>
                       <td style="text-align: left;">名称</td>
                      <td>执行周期
                        <font-awesome-icon :icon="['fa','sort']" size="lg" />
                        <!-- <iconSvg name="downSort" w="14px" h="14px" ></iconSvg> -->
                      </td>
                      <td @click="sort('date', sort1, 1)">上次执行时间<font-awesome-icon :icon="['fa','sort']" size="lg" />
                        <!-- <iconSvg name="downSort" w="14px" h="14px" ></iconSvg> -->
                          </td>
                      <td style="text-align: right;">负责人</td>
                    </tr>
                    </thead>
                </x-table>
            </swiper-item>
        </swiper>
        <!--  <font-awesome-icon :icon="['fa','sort']" size="lg" v-if="item == '最后点巡检时间' && tabIndex == 0" @click="leapfrogSort('lastCheckTime', sort1, 1)"/>
        <font-awesome-icon :icon="['fa','sort']" size="lg" v-if="item == '最后点巡检时间' && tabIndex == 1" @click="leapfrogSort('create_time', sort2, 2)"/> -->
      </div>
      <div class="dataContentSpot" ref="dataContent">
          <div class="deviceTable">
            <mescroll-vue :class="scrollName" ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
            <!-- 第一个表格 -->
            <x-table class="tab1" :cell-bordered="false"  v-show="tabIndex == 0">
                <!-- <tr v-for="(item, index) in showCheckDatas" :key="index" @click="componentCheckInfo(item,item.userId == userIdNum)"> -->
                  <tr v-for="(item, index) in showCheckDatas" :key="index" @click="componentCheckInfo(item, (item.checkLeader ? item.checkLeader.split(',').indexOf(userIdNum) != -1 : false))">
                  <td style="text-align: left;" v-if="item.deviceName">
                    <ul>
                      <li style="line-height: 20px;color:#456de6;">{{item.name}}</li>
                      <li style="line-height: 20px;margin-left: 8px;">{{item.deviceName}}</li>
                    </ul>
                  </td>
                  <td v-else style="text-align: left;">{{item.name}}</td>
                  <td>{{item.remainTime | timeStamp}}</td>
                  <td>{{item.type}}</td>
                   <td v-if='item.status=="1"'><span style="color:#456de6;" :class="['tableContent',{border1:(item.checkLeader ? item.checkLeader.split(',').indexOf(userIdNum) != -1 : false)}]">可执行</span></td>
                  <td v-else-if='item.status=="2"'><span style="color:#ffffff;" :class="['tableContent',{border2:(item.checkLeader ? item.checkLeader.split(',').indexOf(userIdNum) != -1 : false)}]">待执行</span></td>
                  <td v-else-if='item.status=="3"'><span style="color:#ffffff;" :class="['tableContent',{border3:(item.checkLeader ? item.checkLeader.split(',').indexOf(userIdNum) != -1 : false)}]">已执行</span></td>
                  <td v-else-if='item.status=="4"'><span style="color:#ff9900;" :class="['tableContent',{border4:(item.checkLeader ? item.checkLeader.split(',').indexOf(userIdNum) != -1 : false)}]">已逾期</span></td>
                  <td v-else-if='item.status=="5"'><span style="color:#ff9900;" :class="['tableContent',{border5:(item.checkLeader ? item.checkLeader.split(',').indexOf(userIdNum) != -1 : false)}]">逾期执行</span></td>
                  <td v-else></td>
                  <td style="color:#456de6;text-align: right;" v-if="(item.checkLeader ? item.checkLeader.split(',').indexOf(userIdNum) != -1 : false)" @click.stop="chooseTransfer(item,item.checkLeader.split(',').indexOf(userIdNum) != -1)"><span style="border:1px solid #456de6;display:inline-block;height:27px;line-height:27px;padding:1px 11px;">转办</span></td>
                  <td style="text-align: right;" v-else><span>{{item.operatorName}}</span></td>
                </tr>
            </x-table>

            <x-table class="tab2" :cell-bordered="false" v-show="tabIndex == 1">
              <tr v-for="(item, index) in showCheckDzxDatas" :key="'add-'+index" @click="componentCheckInfo(item,item.userId == userIdNum)">
                  <!-- <td ><ul><li style="line-height: 20px;">{{item.name}}</li><li v-if="item.deviceName" style="line-height: 20px;">（{{item.deviceName}}）</li></ul></td> -->
                  <td style="text-align: left;" v-if="item.deviceName">
                    <ul>
                      <li style="line-height: 20px;color:#456de6;">{{item.name}}</li>
                      <li style="line-height: 20px;margin-left: 8px;">{{item.deviceName}}</li>
                    </ul>
                  </td>
                  <td v-else style="text-align: left;">{{item.name}}</td>
                  <td>{{item.type}}</td>
                  <td v-if="item.startTime!=''&&item.endTime!=''">
                    <ul>
                        <div class="timeTu">
                          <span style="color:rgba(255,255,255,0.6);">至</span>
                        </div>
                        <li style="width:86%;line-height: 20px;">{{item.startTime | formatDateHour}}点</li>
                        <li style="width:86%;line-height: 20px;">{{item.endTime | formatDateHour}}点</li>
                    </ul>
                  </td>
                  <td v-else></td>
                  <td style="color:#456de6;text-align: right;" v-if="item.checkLeader.split(',').indexOf(userIdNum) != -1" @click.stop="chooseTransfer(item,item.userId == userIdNum)"><span style=" border:1px solid #456de6; display:inline-block;height:27px;line-height:27px;padding:0 10px;">转办</span></td>
                  <td style="text-align: right;" v-else><span>{{item.operatorName}}</span></td>
              </tr>
            </x-table>

            <x-table class="tab3" :cell-bordered="false"  v-show="tabIndex == 2">
              <tr v-for="(item, index) in showCheckRecordDatas" :key="'add-'+index" @click="WorkSheetDetail(item)">
                   <td style="text-align: left;" v-if="item.deviceName">
                    <ul>
                      <li style="line-height: 20px;color:#456de6;">{{item.name}}</li>
                      <li style="line-height: 20px;margin-left: 8px;">{{item.deviceName}}</li>
                    </ul>
                  </td>
                  <td v-else style="text-align:left;">{{item.name}}</td>
                  <td v-if="item.update_time!=''">
                     <ul>
                      <li style="line-height: 20px;">{{item.operatorTime | formatDate1}}</li>
                      <li style="line-height: 20px;">{{item.operatorTime | formatDate2}}</li>
                    </ul>
                  </td>
                  <td v-else></td>
                  <td>{{item.type}}</td>
                  <td  style="color:#456de6;" v-if='item.status=="1"'>可执行</td>
                  <td style="color:#ffffff;" v-else-if='item.status=="2"'>待执行</td>
                  <td style="color:#ffffff;" v-else-if='item.status=="3"'>已执行</td>
                  <td  style="color:#ff9900;" v-else-if='item.status=="4"'>已逾期</td>
                  <td style="color:#ff9900; " v-else-if='item.status=="5"'>逾期执行</td>
                  <td v-else></td>
                  <td style="text-align: right;">{{item.executor}}</td>
              </tr>
            </x-table>
            <x-table class="tab4" :cell-bordered="false"  v-show="tabIndex == 3">
              <tr v-for="(item, index) in showCheckDxjDatas" :key="'add-'+index">
                   <td style="text-align: left;" v-if="item.deviceName">
                    <ul>
                      <li style="line-height: 20px;color:#456de6;">{{item.name}}</li>
                      <li style="line-height: 20px;margin-left: 8px;">{{item.deviceName}}</li>
                    </ul>
                  </td>
                  <td v-else style="text-align: left;">{{item.name}}</td>
                  <td>{{item.cycle}}
                    <span v-if="item.unit=='0'">小时</span>
                    <span v-if="item.unit=='1'">天</span>
                    <span v-if="item.unit=='2'">周</span>
                    <span v-if="item.unit=='3'">月</span>
                    <span v-if="item.unit=='4'">年</span>
                  </td>
                  <td v-if="item.executeTime">
                    <ul>
                      <li style="line-height: 20px;">{{item.executeTime | formatDate1}}</li>
                      <li style="line-height: 20px;">{{item.executeTime | formatDate2}}</li>
                    </ul>
                  </td>
                  <td v-else></td>
                  <td style="text-align: right;">{{item.executor}}</td>
              </tr>
            </x-table>
            </mescroll-vue>
          </div>
      </div>
      <div class="footer" style="display:flex">
        <div class="checkMenu"
            style="flex:1"
            @click="spotCheckClick"
            v-if="privilege('wechat_operaionManage','wechat_operaionManage:save:check_record') || privilege('wechat_operaionManage','wechat_operaionManage:show:check_record')">
          <p style="line-height:28px;"><iconSvg  name='check-1' w="30px" h="30px"></iconSvg></p>
          <p style="line-height:28px;">点巡检</p>
        </div>
        <div class="changeMenu"
            style="flex:1;background-color:rgba(0,0,0,0.2)"
            @click="changeManageClick"
            v-if="privilege('wechat_operaionManage','wechat_operaionManage:show:change_record') || privilege('wechat_operaionManage','wechat_operaionManage:save:change')" >
          <p style="line-height:28px;"><iconSvg  name='change' w="30px" h="30px"></iconSvg></p>
          <p style="line-height:28px;">更换</p>
        </div>
      </div>
    </div>
</template>
<script>
import { Icon, Grid, GridItem ,Tab,Group, TabItem ,Swiper,SwiperItem,XTable,ButtonTab, ButtonTabItem} from 'vux'
import { constants } from 'crypto';
import ScanSpot2 from "../../assets/icon/camera1.png"
import ScanSpot1 from "../../assets/icon/camera2.png"
import ChangeManage1 from "../../assets/icon/change2.png"
import ChangeManage2 from "../../assets/icon/addChange.png"
import request from '../../config/request.js';
import DeviceSelected from "../common/device-selected-detail-device"
import BScroll from "better-scroll";
import { Privilege } from "@/mixin";
import MescrollVue from "mescroll.js/mescroll.vue";
import Organization from "../common/organization"
// import { log } from 'util';
let _this = null

export default {
    components: {
        // Icon,
        Grid,
        GridItem,
        Tab,
        TabItem,
        Swiper,
        SwiperItem,
        XTable,
        DeviceSelected,
        ButtonTab,
        ButtonTabItem,
        BScroll,
        MescrollVue,
        Organization
    },
  data(){
    return {
      statusNum: '',
      nowColor:'',
      departmentId:'',
      tabIndex: 0,
      tltles: [],
      demo2: '可执行',
      spotCheckImg:ScanSpot2,
      changeManageImg:ChangeManage1,
      showCheckDatas:[],
      showCheckDatasInfo:[],
      departmentName: '',
      showCheckRecordDatas:[],
      showCheckDzxDatas:[],//
      showCheckRecordDatasInfo:[],
      showCheckDxjDatas:[],//
      showCheckDxjDatasInfo:[],//
      // headNames:[],
      addCheckTitles:['名称','剩余时间','类型','状态','操作'],
      addDzxTitles:['名称','类型','执行时间','操作'],
      CheckRecordTitles:['名称','执行时间','类型','执行状态','执行人'],
      CheckDxjTitles:['名称','执行周期','上次执行时间','负责人'],
      userActionMap: {},
      tabShow0:false,
      tabShow1:false,
      scanShow:true,
      //展示部门列表
      showDep: false,
      //部门列表数据
      departments: ['一级部门', '二级部门', '三级部门'],
      radioValue: ['一级部门'],
      checkDep: '一级部门',
      //展示部门更多筛选
      showMore: false,
      checkMore:'筛选',
      departmentDetail: '',
      sort1: false,
      sort2: false,
      sortType: 'lastCheckTime',
      runstatus: ['全部', '正常', '轻微故障', '中度故障', '重度故障'],
      ind: 0,
      // show3: false,
      activestyle: '',
      deviceNameSpot: '',
      deviceCodeSpot: '',
      operationPerson: '',
      selectDepartment:{},
      url:'',
      scrollName:'me_scroll',
      mescroll: null,
      mescrollDown: {},
      mescrollUp: {
        that: this,
        callback: this.upCallback,
        page: {
          num: 0,
          size: 20
        },
        htmlNodata: '<p class="upwarp-nodata">-- 暂无更多的数据 --</p>',
        noMoreSize: 5,
        toTop: {
          src: "./static/mescroll-totop.png",
          offset: 1000
        }
      },
      departmentId:0,
      departmentInfo:{},
      number:0,
      checkConfigNum:0,
      checkRecordNum:0,
      scheduleStatusList:[],
      userIdNum:0,
      dxjList:[],
    }
  },

  mixins:[Privilege],
  created:function(){
    let localUrl = location.href.split('#')[0];
    this.$http(this.$API.getWxSign,{url:encodeURIComponent(localUrl)}, true).then((res) => {
      if (res){
        wx.config({
          debug: false,
          appId: res.appId, // 必填,公众号的唯一标识
          timestamp: res.timestamp, // 必填,生成签名的时间戳
          nonceStr: res.nonceStr, // 必填,生成签名的随机串
          signature: res.signature, // 必填,签名
          jsApiList: ['scanQRCode',] // 必填,需要使用的JS接口列表
        });
          /* 处理失败验证 */
        wx.error(function (res) {
          console.log("res:====>",res);
        // config 信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
        });
      }
    });

    _this = this
    this.getDomin();
    let userInfo = request.getUserInfo();
    if (!userInfo) {
        return;
    }
    this.departmentInfo = JSON.parse(this.$route.query.department);
    this.departmentId = this.departmentInfo.id;
    localStorage.setItem('curDepartment',JSON.stringify(this.departmentInfo))


    if(this.privilege('wechat_operaionManage','wechat_operaionManage:save:check_record')){
        this.tltles.push('可执行')
    }
    if(this.privilege('wechat_operaionManage','wechat_operaionManage:save:check_record')){
        this.tltles.push('待执行')
    }
    if(this.privilege('wechat_operaionManage','wechat_operaionManage:show:check_record')){
        this.tltles.push('历史记录')
    }
    if(this.privilege('wechat_operaionManage','wechat_operaionManage:save:check_record')){
        this.tltles.push('点巡检')
    }
    this.loadData();
    this.getUserInfo();
    // this.getCheckConfigNum();
    // this.getCheckRecordNum();

  },
  beforeRouteEnter(to, from, next) {
    /* if(from.name == "componentCheck"){
      let params = {
          departmentId:_this.departmentId,
          name:'',
          status:0,
          code:'',
          pageNum: 0,
          pageSize: 20,
        };
        _this.$http(_this.$API.deviceCheckRecordList, params, true).then(res => {
          console.log(res.content);
          if (res.content) {
            let data = res.content;
            _this.number = res.totalElements;
            _this.showCheckDatas = [];
            _this.showCheckDatas = _this.showCheckDatas.concat(data);
            _this.showCheckDatasInfo = _this.showCheckDatas;
          } else {
            console.log(res)
          }
        });
    } */
    next(vm => {
      vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter();
      let tabIndexNum = vm.$route.query.tabIndexNum
      if (tabIndexNum) {
        if (tabIndexNum == 2 || tabIndexNum == 3) {
          vm.scrollName = 'record_scroll'
        } else {
          vm.scrollName = 'me_scroll';
        }

        vm.$nextTick(() => {
          vm.tabIndex = tabIndexNum
        })
      }

      if (vm.$route.query.overdue) {
        vm.overdue = JSON.parse(vm.$route.query.overdue)
        if (vm.overdue) {
              vm.statusNum = "4"
        }
      }
    });
  },
  beforeRouteLeave(to, from, next) {
    this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave();
     let tabIndexNum = this.$route.query.tabIndexNum
     if (tabIndexNum) {
       let reg = /(tabIndexNum=)([^&]*)/gi
       let fullPath = from.fullPath.replace(reg, `tabIndexNum=${this.tabIndex}`)
       history.pushState(null, null, `/#${fullPath}`)
     }
    next();
  },
  mounted: function(){
    // this.$nextTick(() => {
    //   this.Scroll = new BScroll(this.$refs.mescroll,{click: true, tap: true});
    // });
    this.getUser();
    this.getScheduleStatus();
    this.selectDepartment = this.departmentInfo
  },
  //返回首页的公共方法
  inject: ["backToHomepage"],
  methods:{
        // 时间排序
    sort(type, sorted, sortnumber) {
      if (sorted === false) {
        this.sort1 = true;
        this.sortType = 'workSheetTime';
        this.list2.sort(this.compare(this.sortType));
      } else {
        this.sort1 = false;
        this.sortType = 'workSheetTime';
        this.list2.sort(this.compare2('workSheetTime'));
      }
    },
    compare(attr) {
      return function(a,b){
         var x = a[attr];
         var y = b[attr];
         return ((x>y)?-1:(x<y)?1:0)
      }
    },
    compare2(attr) {
      return function(a,b){
         var x = a[attr];
         var y = b[attr];
         return ((x<y)?-1:(x>y)?1:0)
      }
    },
    changeStatic: function (index) {
      // debugger
      this.statusNum = index
    },
    getUser(){
       if(this.$store.state.user){
          this.userIdNum = this.$store.state.user.id;
          console.log(this.userIdNum);
        }
        if(this.userIdNum == 0){
          this.$http(this.$API.getUserInfo, true).then((res) => {
            if(res){
                this.userIdNum = res.id;
                console.log(this.userIdNum);
            }
          })
        }
    },
    changeYwglHome(){
      this.$router.push({name: 'operaionManage'});
    },
    /* 筛选状态条件获取 */
    getScheduleStatus:function(){
        this.$http(this.$API.getScheduleStatus, {}, true).then((res) => {
          // debugger
          if (res) {
            res.forEach(obj => {
              // console.log(obj); { 0 1: "可执行", 1 2: "待执行", 2 3: "已执行", 0 4: "已逾期", 2 5: "逾期执行"}
              let k = '';
              // let list = [{'xl':'','val':'全部'}];
              let list = [];
              for(k in obj){
                // console.log("序列："+k+";"+"对应值："+obj[k]);
                let object = {};
                if(this.tabIndex == 0){
                  if(k==1||k==4){
                    object = {'xl':k,'val':obj[k]}
                    list.push(object);
                  }
                }else if(this.tabIndex == 1){
                  if(k==2){
                    object = {'xl':k,'val':obj[k]}
                    list.push(object);
                  }

                }else if(this.tabIndex == 2){
                  if(k==5||k==3){
                    object = {'xl':k,'val':obj[k]}
                    list.push(object);
                   }
                }else{
                    object = {'xl':k,'val':obj[k]}
                    list.push(object);
                }

              }
              this.scheduleStatusList = list
            });
          }
        });
    },
    getDomin: function(){
      this.url = window.location.protocol +'//'+ window.location.host;
    },

    getUserInfo: function(){
      this.$http(this.$API.getUserInfo,{},true).then((res)=>{
        this.departmentName = res.department.departmentName;
      })
    },
    // 判断点击的Tab
    tabSelect:function(config){
        this.tabIndex = config
        if(this.tabIndex ==0){
          this.scrollName = 'me_scroll';
          // this.headNames = this.addCheckTitles;
          this.scanShow = true;
          this.deviceNameSpot = '';
          this.statusNum = '';
          this.deviceCodeSpot = '';
          this.getCheckConfigNum();
          this.getScheduleStatus();
        }else if(this.tabIndex ==1){
          this.scrollName = 'me_scroll';
          // this.headNames = this.addDzxTitles;
          this.scanShow = true;
          this.deviceNameSpot = '';
          this.statusNum = '';
          this.deviceCodeSpot = '';
          this.mescroll.resetUpScroll(true);
          this.getScheduleStatus();
        }else if(this.tabIndex ==2){
          this.scrollName = 'record_scroll';
          // this.headNames = this.CheckRecordTitles;
          this.scanShow = false;
          this.deviceNameSpot = '';
          this.deviceCodeSpot = '';
          this.statusNum = '';
          this.getCheckRecordNum();
          this.mescroll.resetUpScroll(true);
          this.getScheduleStatus();
        }else if(this.tabIndex ==3){
          this.scrollName = 'record_scroll';
          // this.headNames = this.CheckDxjTitles;
          this.scanShow = true;
          this.deviceNameSpot = '';
          this.statusNum = '';
          this.deviceCodeSpot = '';
          this.mescroll.resetUpScroll(true);
          this.getScheduleStatus();
        }
    },
    // 设置表头内容
    loadData:function(){
        this.headNames = this.addCheckTitles;
    },

    // 查看设备点巡检记录
    deviceCheckRecord:function(config){
        this.$router.push({
            name: `deviceCheckRecord`,
            query: {
                deviceId:config.device_id
            }
        })
    },

    // 查看部件点巡检记录
    componentCheckRecord:function(config){
        this.$router.push({
        name: `componentCheckRecord`,
        query: {
            deviceId:config.device_id,
          }
        })
    },

    toDeviceInfo: function(item){
      this.$router.push({
        name: `deviceInfo`,
        query: {
            deviceInfo: item
          }
        })
    },

    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },

    upCallback(page, mescroll) {
      // debugger
      let index = this.tabIndex;
      if(this.tabIndex == 0){
        let params = {
          departmentId:this.departmentId,//this.departmentId
          name:this.deviceNameSpot,
          userName:this.operationPerson,
          status:this.statusNum,
          code:this.deviceCodeSpot,
          pageNum: page.num,
          pageSize: page.size,
        };
        this.$http(this.$API.deviceCheckRecordList, params, true).then(res => {
          // console.log(res.content);
          if (res.content) {
            let data = res.content;
            this.number = res.totalElements;
            if (page.num === 1) {
              this.showCheckDatas = [];
            }
            // this.showCheckDatas = this.showCheckDatas.concat(data);
            this.showCheckDatasInfo = this.showCheckDatas;
            // this.showCheckDatas.sort(this.compare('status'))
            let canExecute = [];
            let overdueList = [];
            for(var index in data){
              if(data[index].status == 4){
                var checkRecord = data[index];
                canExecute.push(checkRecord)
              }
              else{
                overdueList.push(data[index])
              }
            }

            let personExecuteListFront = [];
            let personExecuteListLater = [];
            for(var index in canExecute){
              if((canExecute[index].checkLeader).split(',').indexOf(this.userIdNum) != -1){
                personExecuteListFront.unshift(canExecute[index])
              }else{
                personExecuteListLater.push(canExecute[index])
              }
            }
            let nowTime = new Date().getTime()
            personExecuteListFront.sort((a, b) => {
              var time1 = a.endTime
              var time2 = b.endTime
              if (time1 < time2) {
                    return -1;
                } else if (time1 > time2) {
                    return 1;
                } else {
                    return 0;
                }
            })

            console.log(personExecuteListFront)
            personExecuteListLater.sort((a, b) => {
              var time1 = a.endTime
              var time2 = b.endTime
              if (time1 < time2) {
                    return -1;
                } else if (time1 > time2) {
                    return 1;
                } else {
                    return 0;
                }
            })

          let executeList = personExecuteListFront.concat(personExecuteListLater)

          console.log(executeList)



            let overListFront = [];
            let overListlater = [];
            for(var index in overdueList){
              if((overdueList[index].checkLeader).split(',').indexOf(this.userIdNum) != -1){
                overListFront.unshift(overdueList[index])
              }else{
                overListlater.push(overdueList[index])
              }
            }

            overListFront.sort((a, b) => {
              var time1 = a.endTime - nowTime
              var time2 = b.endTime -  nowTime
              if (time1 < time2) {
                    return 1;
                } else if (time1 > time2) {
                    return -1;
                } else {
                    return 0;
                }
            })

            overListlater.sort((a, b) => {
              var time1 = a.endTime - nowTime
              var time2 = b.endTime -  nowTime
              if (time1 < time2) {
                    return 1;
                } else if (time1 > time2) {
                    return -1;
                } else {
                    return 0;
                }
            })

          let overList = overListFront.concat(overListlater)

          console.log(overList)

            let onePageData = executeList.concat(overList)
            this.showCheckDatas = this.showCheckDatas.concat(onePageData)
            this.$nextTick(() => {
              if(res.pageNum === res.totalPages){
                mescroll.endSuccess(data.length,false);
              }else{
                mescroll.endSuccess(data.length);
              }
            });
          } else {
            this.mescroll.endErr();
          }
        });
      }else if(this.tabIndex == 1){
        // debugger
        let params = {
          departmentId:this.departmentId,
          // departmentId:'907',
          name:this.deviceNameSpot,
          userName:this.operationPerson,
          status:this.statusNum,
          code:this.deviceCodeSpot,
          pageNum: page.num,
          pageSize: page.size,
        };
        this.$http(this.$API.deviceWaitCheckRecordList, params, true).then(res => {
          // debugger
          if (res.content) {
            let data = res.content;
            this.number = res.totalElements;
            if (page.num === 1) {
              this.showCheckDzxDatas = [];
            }
            this.showCheckDzxDatas = this.showCheckDzxDatas.concat(data);
            this.showCheckDzxDatasInfo = this.showCheckDzxDatas;
            this.$nextTick(() => {
              if(res.pageNum === res.totalPages){
                mescroll.endSuccess(data.length,false);
              }else{
                mescroll.endSuccess(data.length);
              }
            });
          } else {
            this.mescroll.endErr();
          }
        });
        // showCheckDzxDatas
      }else if(this.tabIndex == 2){
        // debugger
        let params = {
          // departmentId:'907',
          departmentId:this.departmentId,
          name:this.deviceNameSpot,
          userName:this.operationPerson,
          status:this.statusNum,
          code:this.deviceCodeSpot,
          pageNum: page.num,
          pageSize: page.size
        };
        this.$http(this.$API.loadDeviceCheckRecords, params, true).then(res => {
          // debugger
          if (res.content) {
            let data = res.content;
            this.number = res.totalElements;
            if (page.num === 1) {
              this.showCheckRecordDatas = [];
            }
            this.showCheckRecordDatas = this.showCheckRecordDatas.concat(data);
            this.showCheckRecordDatasInfo = this.showCheckRecordDatas;
            this.$nextTick(() => {
              if(res.pageNum === res.totalPages){
                mescroll.endSuccess(data.length,false);
              }else{
                mescroll.endSuccess(data.length);
              }
            });
          } else {
            this.mescroll.endErr();
          }
        });
      }else if(this.tabIndex == 3){
        //点巡检记录查看 shif 2019-10-25
        let params = {
          // departmentId:'907',
          departmentId:this.departmentId,
          name:this.deviceNameSpot,
          userName:this.operationPerson,
          status:this.statusNum,
          code:this.deviceCodeSpot,
          pageNum: page.num,
          pageSize: page.size
        };
        this.$http(this.$API.getLoadDeviceAndComponentConfig, params, true).then(res => {
          // debugger
          if (res.content) {
          let data = res.content;
          this.number = res.totalElements;
           if (page.num === 1) {
              this.showCheckDxjDatas = [];
            }
          this.showCheckDxjDatas = res.content;
          this.showCheckDxjDatasInfo = this.showCheckRecordDatas;
          this.$nextTick(() => {
              if(res.pageNum === res.totalPages){
                mescroll.endSuccess(data.length,false);
              }else{
                mescroll.endSuccess(data.length);
              }
            });
          }else{
            this.mescroll.endErr();
          }
        });
      }
    },
    // 历史记录详情
    WorkSheetDetail:function(config){
        this.$router.push({
          name: `workSheetDetail`,
          query: {
            id:config.id,
            queryName: true,
            name: config.type == '设备' ? 'deviceRecord' : 'componentRecord'
          }
        })
      },
    // 获取当前登陆人的设备点巡检设置
    loadDeviceCheckRecord: function(){
      let param = {
        departmentId:0
      }
      this.$http(this.$API.deviceCheckRecordList, param, true).then((res)=>{
        this.showCheckDatas = res;
        this.showCheckDatasInfo = res;
      })
    },

    // 获取当前登陆人的设备点巡检记录
    loadDeviceCheckRecordList: function(){
      let param = {
        departmentId:0
      }
      this.$http(this.$API.loadDeviceCheckRecords, param, true).then((res)=>{
          this.showCheckRecordDatas = res;
          this.showCheckRecordDatasInfo = res;
      })
    },

    spotCheckClick: function(){
        this.spotCheckImg = ScanSpot2;
        this.changeManageImg = ChangeManage1;
        // this.$router.push({name: 'spotCheck'})
        window.location.href = this.url + '/#/operaionManage/spotCheck?department='+ JSON.stringify(this.departmentInfo);
    },
    changeManageClick: function(){
        this.spotCheckImg = ScanSpot1
        this.changeManageImg = ChangeManage2
        window.location.href = this.url + '/#/manage/deviceDetailManage/addReplace?department='+ JSON.stringify(this.departmentInfo);
        // this.$router.push({name: 'addReplace'})
    },

    // 设备下所有部件点巡检记录
    componentCheckInfo: function(config,sfzb,listType){
       // 部件查看点巡检记录 2019-10-24 shif
        if(config.type=='部件'){
          if(!sfzb){
            return false;
          }
          this.$router.push({
            name: `addComponentCheck`,
            query: {
                zb:sfzb,
                listType:this.tabIndex,
                deviceId: config.deviceId,
                componentId: config.id,
                id: config.checkId,
                departmentId: config.departmentId
            }
          })
        // 设备查看点巡检记录 2019-10-24 shif
        }else if(config.type=='设备'){
          // config.status=sfzb;
          this.$router.push({
              name: `componentCheck`,
              query: {
                listType:this.tabIndex,
                deviceId: config.deviceId,
                componentId: config.id,
                id: config.checkId,
                departmentId: config.departmentId
              }
          })
        }
    },
    /* showVuePopup3(flag) {
      if (flag === false){
        this.showMore = false;
        this.activestyle = ''
      }
      this.show3 = flag;
    }, */
    // 添加设备点巡检
    addDeviceCheck: function(config){
        this.$router.push({
            name: `addDeviceCheck`,
            query: {
                deviceInfo:config,
                departmentId: config.departmentId,
                departmentName: this.departmentName,
                // operator: this.showCheckRecordDatas[0].operator
            }
        })
    },
    spotCheckDetail:function(config){
        this.$router.push({
        name: `workSheetDetail`,
        query: {
            id: config.id,
            checkTime: config.lastCheckTime,
            queryName: false,
            name: 'deviceCheck'
            }
        })
    },
    // 查询部门下所有设备
    dataProduce:function(){

    },
    loadDeviceList: function(){
      this.$http(this.$API.getUserInfo,{},true).then((res)=>{
          this.departmentId = res.department.id;
          var param =  {
              departmentId: this.departmentId,
              };
          DeviceDao.loadDevice(param,res=>{
          })
      })
    },
    //切换部门
    changeDep: function () {
      this.showDep = true;
      this.showMore = false;
    },
    //
    change (val, label) {
      if (this.checkDep != this.radioValue){
        if(val[0]){
          this.showDep = false;
        }
        this.checkDep = val[0];
      }
    },
    //展开更多
    changeMore: function () {
      this.showMore = true;
      this.showDep = false;
      // this.show3 = true;
    },
    //跳转到设备信息页面
    getIndex:function(index){
      this.$router.push({name: 'deviceInfo'});

      },
    handleDeviceDetail: function(deviceDetail){
        this.$store.commit('changeDeviceMessage',deviceDetail);
        this.getDeviceDetail();
    },

    // 部门筛选
    handleDepartment: function(departmentDetail){
      this.departmentInfo = departmentDetail;
      this.selectDepartment = this.departmentInfo;
      this.departmentId = departmentDetail.id;
      this.mescroll.triggerDownScroll();
      // if(this.tabIndex == 0){
      //   this.getCheckConfigNum();
      // }else{
      //   this.getCheckRecordNum();
      // }
      localStorage.setItem('curDepartment',JSON.stringify(this.departmentInfo))
    },

    // 条件筛选
    overBtn: function () {
      this.showMore = false;
      this.mescroll.resetUpScroll(true);
      let v = this.statusNum;
      // if(this.tabIndex == 0){
      //   this.getCheckConfigNum();
      // }else{
      //   this.getCheckRecordNum();
      // }
    },

    reset:function(){
      this.deviceNameSpot = '';
      this.statusNum = '';
      this.deviceCodeSpot = '';
    },

    leapfrogSort(type, sorted, sortnumber) {
      if (sortnumber === 1){
        if (sorted === false) {
          this.sort1 = true;
          this.sortType = type;
          this.showCheckDatas.sort(this.compare(type));
        }else{
          this.sort1 = false;
          this.sortType = type;
          this.showCheckDatas.sort(this.compare2(type));
        }
      }else {
        if (sorted === false) {
          this.sort2 = true;
          this.sortType = type;
          this.showCheckRecordDatas.sort(this.compare(type));
        }else{
          this.sort2 = false;
          this.sortType = type;
          this.showCheckRecordDatas.sort(this.compare2(type));
        }
      }
    },
    compare(attr) {
      return function(a,b){
         var x = a[attr];
         var y = b[attr];
         return ((x>y)?-1:(x<y)?1:0)
      }
    },
    compare2(attr) {
      return function(a,b){
         var x = a[attr];
         var y = b[attr];
         return ((x<y)?-1:(x>y)?1:0)
      }
    },
    //扫码添加
    scanAdd: function () {
      let strUrl = '';
      wx.ready(()=>{
          wx.scanQRCode({ // 微信扫一扫接口
          desc: 'scanQRCode desc',
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
          success: function (res) {
            //扫码之后返回设备信息，获取设备id，跳转对应页面
            strUrl = res.resultStr;
            let name="state";
            let reg = new RegExp('(^|&)' + name + '=([^&]*)(#|$)', 'i');
            let r = strUrl.substr(1).match(reg);
            let id = '';
            if (r != null) {
              id =  r[2].split("#")[0];
            }
            if(strUrl.indexOf(location.hostname) != -1){
              window.location.href = _this.url + '/#/operaionManage/spotCheck/componentCheck?deviceId=' + id;
            }else{
             this.$commom.alert('请输入正确的手机号码');;
            }

          }
        })
      }).catch((err)=>{
        console.log("err:===>",err)
      });
    },
    // 获取点巡检和更换可操作的数量
    getCheckConfigNum: function(){
      let param = {
        departmentId:this.departmentId,
        name:this.deviceNameSpot,
        code:this.deviceCodeSpot,
        status:this.statusNum,
      }
      //点巡检设备数目
      this.$http(this.$API.getCheckConfigNum,param, true).then((res)=>{
          if(res){
          this.checkConfigNum = res.count;
          }
          if(this.tabIndex == 0){
            this.number = this.checkConfigNum;
          }
      })
    },
    getCheckRecordNum: function(){
      let param = {
        departmentId:this.departmentId,
        name:this.deviceNameSpot,
        code:this.deviceCodeSpot,
        status:this.statusNum,
      }
      //点巡检设备数目
      this.$http(this.$API.getDeviceCheckRecordNum, param, true).then((res)=>{
        if(res){
        this.checkRecordNum = res.count;
        }
        if(this.tabIndex == 1){
          this.number = this.checkRecordNum;
        }
      })
    },

    chooseTransfer: function(item,status){
      if(!!status){
        let type = ''
        if(item.type == '设备'){
          type = 'device'
        }else{
          type = 'component'
        }
        this.$router.push({
          name: `chooseTransfer`,
          query:{
              departmentId: item.departmentId,
              checkId: item.checkId,
              type:type,
              pageName:'spotCheck',
              departmentInfo: this.departmentInfo
          }
        })
      }
    }
  },
}
</script>
<style  lang="less" scoped>
  @import '../../styles/iconfont.css';
  * { touch-action: none; }
  #app, .content{
    width: 100%!important;
    height: 100%!important;
  }
  .main_wrap{
    position: fixed;
    top:0px;
    width: 100%;
    height: 100%;
    background-color: #22233f;
    color: #fff;
  }
  .deivceTop{
    height: 50px;
    width: 100%;
    position: fixed;
    top: 0px;
    z-index: 110;
    display: flex;
    align-items: center;
    .changeDep{
        width: 34%;
        height: 50px;
        font-size: 20px;
        padding: 0 0 0 10px;
        color: #ffffff;
    }
    .backTo{
      width: 12%;
      color:#fff;
      line-height: 50px;
      position: absolute;
      right:0px;
    }
    .scan{
      margin-left: 20%;
    }
    .changeHome{
      width:11%;
      float: right;
      position: fixed;
      top: 3px;
      right: 60px;
      color: #fff;
    }
    .changeMore{
      width: 32%;
      height: 40px;
      font-size: 16px;
      line-height: 40px;
      text-align: center;
      color: #ffffff;
      border-left: 1px solid rgba(204, 204, 204, 0.46);
      border-right: 1px solid rgba(204, 204, 204, 0.46);
      span{
        font-size: 20px;
      }
    }
    div{
      width: 20%;
      float: left;
      height: 50px;
      vertical-align: middle;
      img.img{
        display: inline-block;
        width: 25px!important;
      }
    }
}

  .DepData{
      position: absolute;
      width: 100%;
      z-index: 99;
    }
  .DepDataStyle{
      height: 50px;
      width: 90%;
      margin: 0 5%;
      font-size: 20px;
      text-align: left;
      line-height: 50px;
      color: #ffffff;
      border-bottom: rgba(255,255,255,0.2) 1px solid;
      .selectImg{
        width: 30px;
        height: 30px;
        float: right;
        margin: 10px;
      }
    }
  .MoreDataP{
    background: #2a2c52;
    position: fixed;
    width: 100%;
    z-index: 999;
    height: 100%;
    padding-bottom: 20px;
    .deviceName{
      border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    .deviceCode{
      border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    .operationPerson{
      border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    .deviceCodeZt {
      // position: relative !important;
      overflow: hidden;
    }

    /* .deviceCodeZt button{
      font-size: 16px;
      padding: 4px 10px;
      border: none;
      border-radius: 4px;
      width: 25%;
      margin: 0 10px;
    }
    .deviceCodeZt button:focus{outline: none} */
    div{
      font-size: 16px;
      line-height: 40px;
      margin: 10px;
      input{
        margin-left: 20px;
        text-align: left;
        color:rgba(255,255,255,.5);
        font-size: 16px;
        &::-webkit-input-placeholder{
          color:rgba(255,255,255,.5);
          font-size: 14px;
        }
      }
    }
  }
  table td ul li{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .active{
    background-color: #3967DC;
    color: #fff;
  }
  .default{
    background-color: #ddd;
    color: #000;
  }

  .mask {
      position: absolute;
      top: 97%;
      width: 100%;
      left: -10px;
      height: -webkit-fill-available;
      background-color: rgba(0, 0, 0, 0.3);
      transition: all 0.2s ease-in;
      z-index: 999;
  }
  .timeTu{
    width:14%;
    height:76%;
    float:right;
    text-align: center;
    background-size: 100%;
    background: url("../../assets/icon/time-bg.png") no-repeat center 9px;
  }
  .me_scroll {
    top: 165px;
    position: fixed;
    bottom: 56px;
    height: auto;
  }

  .record_scroll{
    top: 165px;
    position: fixed;
    bottom: 130px;
    height: 60%;
  }
  .deviceTable{
    transform:unset ! important;
  }
 .dataContentSpot .deviceTable .me_scroll /deep/ .tab1 {
    width:96%;
    margin: auto;
    table-layout:fixed;
    td:nth-child(1){
      width: 27%;
    }
    td:nth-child(2){
      width: 26%;
    }
    td:nth-child(3){
      width: 11%;
    }
    td:nth-child(4){
      width: 16%;
    }
    td:nth-child(5){
      width: 16%;
    }
  }
  .dataContentSpot .deviceTable .me_scroll /deep/ .tab2 {
    width:96%;
    margin: auto;
    table-layout:fixed;
    td:nth-child(1){
      width: 34%;
    }
    td:nth-child(2){
      width: 10%;
    }
    td:nth-child(3){
      width: 36%;
    }
    td:nth-child(4){
      width: 16%;
    }
  }
  .dataContentSpot .deviceTable .record_scroll /deep/ .tab3 {
    width:96%;
    margin: auto;
    table-layout:fixed;
   td:nth-child(1){
      width: 28%;
    }
    td:nth-child(2){
      width: 25%;
    }
    td:nth-child(3){
      width: 12%;
    }
    td:nth-child(4){
      width: 19%;
    }
    td:nth-child(5){
      width: 16%;
    }
  }
  .dataContentSpot .deviceTable .record_scroll /deep/ .tab4 {
    width:96%;
    margin: auto;
    table-layout:fixed;
    td:nth-child(1){
      width: 34%;
    }
    td:nth-child(2){
      width: 21%;
    }
    td:nth-child(3){
      width: 30%;
    }
    td:nth-child(4){
      width: 16%;
    }
  }
  table{
    width: 100%;
    // table-layout:automatic;
    margin-top:0px !important;
  }

  table td{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
/*   table thead{
    background-color: rgba(0, 0, 0, 0.3);
  } */

  .dataNum{
    line-height: 30px;
    color: #fff;
    text-align: left;
    padding-left: 15px;
    background-color: rgba(0, 0, 0, 0.3);
  }
  .swiper-class /deep/ .headTab1{
    width:96%;
    margin: auto;
    table-layout:fixed;
    border: none;
    td:nth-child(1){
      width: 27%;
    }
    td:nth-child(2){
      width: 26%;
    }
    td:nth-child(3){
      width: 11%;
    }
    td:nth-child(4){
      width: 16%;
    }
    td:nth-child(5){
      width: 16%;
    }
  }
  .swiper-class /deep/ .headTab2{
    width:96%;
    margin: auto;
    border: none;
    table-layout:fixed;
    td:nth-child(1){
      width: 34%;
    }
    td:nth-child(2){
      width: 10%;
    }
    td:nth-child(3){
      width: 36%;
    }
    td:nth-child(4){
      width: 16%;
    }
  }
  .swiper-class /deep/ .headTab3{
    width:96%;
    margin: auto;
    border: none;
    table-layout:fixed;
    td:nth-child(1){
      width: 28%;
    }
    td:nth-child(2){
      width: 25%;
    }
    td:nth-child(3){
      width: 12%;
    }
    td:nth-child(4){
      width: 19%;
    }
    td:nth-child(5){
      width: 16%;
    }
  }
  .swiper-class /deep/ .headTab4{
    width:96%;
    margin: auto;
    border: none;
    table-layout:fixed;
    td:nth-child(1){
      width: 34%;
    }
    td:nth-child(2){
      width: 21%;
    }
    td:nth-child(3){
      width: 30%;
    }
    td:nth-child(4){
      width: 16%;
    }
  }
  .BtnGroup{
    position: absolute;
    bottom:25px;
    right:10px;
  }
</style>
<style>
    .organization .header{
      padding:18px 10px;
      width: 35%;
      overflow:hidden !important;
      text-overflow:ellipsis !important;
      white-space:nowrap !important;
      word-break:keep-all !important;
    }
    .vux-tab-container{
      z-index: 99;
    }
    .BtnGroup{
      display: flex;
      height: 30px;
      line-height: 30px;
      /* width: fit-content; */
      margin-top: 20px!important;
      float: right;
    }
    .btn-reset{
      background: #3967DC;
      padding: 0 15px;
      margin: 0!important;
      height: 30px;
      line-height: 30px!important;
      border-bottom-left-radius: 15px;
      border-top-left-radius: 15px;
      border-right: 1px #22233f solid;
    }
    .btn-over{
      background: #3967DC;
      padding: 0 15px;
      margin: 0!important;
      height: 30px;
      line-height: 30px!important;
      border-bottom-right-radius: 15px;
      border-top-right-radius: 15px;
    }
    .vux-popup-mask.vux-popup-show{
      z-index: unset !important;
    }
    *{
      -ms-touch-action: unset !important;
      touch-action: unset !important;
    }
    body{
        background-color: #22233f;
        height: 100%;
        width: 100%;
    }
    .main_wrap{
        margin: 0 auto;
        overflow: hidden;
        height: 100%;
        width: 100%;
        padding-bottom: unset !important;
    }
    .contentWrap{
      padding-top: 40px;
      /* overflow: hidden; */
      overflow: hidden;
      position: fixed;
      /* top: 50px; */
      width:100%;
    }
    .footer{
      position: fixed;
      bottom:0;
      left: 0;
      right:0;
      width: 100%;
      touch-action: none !important;
      display: flex;
      text-align: center;
      /* height: 56px; */
      color: #fff;
      font-size: 14px;
    }
    .footer .weui-grid:after{
        border-bottom: none;
    }
    .footer .weui-grids:before{
        border-top: none;
    }
    .weui-grid{
        padding:0px 10px 0px 10px !important;
    }
    .footer .weui-grid__label{
        color: #fff;
    }

    .contentWrap  .vux-tab{
          background-color: #22233f !important;
          height: 45px !important;
      }
    .vux-swiper{
        color: #fff;
    }
    .vux-swiper-item{
        overflow:auto;
    }

    .contentWrap .vux-tab-ink-bar{
        background: #456de6 !important;
    }
    .weui-tabbar{
        background-color: #22233f !important;
    }
    .dataContentSpot{
    color:#fff;
    height: 60%;
    overflow: hidden;
    pointer-events: auto;
  }
  .dataContentSpot .vux-table tr{
    display: flex;
   }

  .dataContentSpot .vux-table tr>td{
    /* flex: 1; */
    text-align: center
  }
</style>

<style lang="less">
   .deviceCodeZt .ztSelect{
      width:120px;
      float:right;
      // overflow: hidden;
      // display: flex !important;
      margin: 0 !important;

    }
    .deviceCodeZt .ztSelect .ivu-select-dropdown{
      position: static !important;
    }
     .border1{
        border: 1px solid #456de6;
    }
    .border2{
        border: 1px solid #ffffff;
    }
    .border3{
        border: 1px solid #ffffff;
    }
    .border4{
        border: 1px solid #ff9900;
    }
    .border5{
        border: 1px solid #ff9900;
    }
    .tableContent{
      display: inline-block;
      height: 31px;
      line-height: 27px;
      padding: 1px 3px;
      box-sizing: border-box;
    }
    .picBox{
      display: block;
      margin-top: 8px;
      .iconImg{
        vertical-align: unset!important;
      }
    }
  .deviceCodeZt{
    .iu-select {
      height: 36px;
      width: 70%;
      padding: 2px 4px;
      border: none;
      outline: none;
      border: 1px solid rgba(69, 109, 230, 1);
      border-radius: 2px;
      font-size: 16px;
      color: #456de6;
      background: transparent;
      option {
        background: rgba(255, 255, 255, 0.9);
      }
    }
  }
</style>
